import React from 'react';
import { Text, View, ScrollView, Image, StyleSheet,StatusBar } from 'react-native';
import { HStack, Button, Input, TextArea, Radio, Switch, Select , Checkbox, Pressable} from "native-base";
import FormItem from '../../components/Form/FormItem';
import { useForm } from 'react-hook-form';

import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
import DatePicker from 'react-native-date-picker'
import dayjs from 'dayjs/esm/index.js';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import FormDatePicker from '../../components/Form/FormDatePicker';


function AddFkd({route,navigation}){
  const { control,handleSubmit,formState: {errors}} = useForm({
    defaultValues: {
      date:new Date(),
    },
  });



  function onSubmit(data){
    console.log(data);
  }
  return (
    <View style={styles.screen}>
      <View style={styles.title}>
        <Text style={styles.titleText}>添加</Text>
      </View>
      <ScrollView>
        <FormItem 
          required
          label='姓名'
          name='name'
          control={control}
          rules={{required: '请输入姓名'}}
          errors={errors.name}
          render={({field:{onChange,value}}) => {
            return (
              <Input 
                size="lg"
                value={value}
                onChangeText={onChange}
                placeholder='请输入姓名'
              />
            )
          }}
        />

        <FormItem 
          required
          label='性别'
          name='gender'
          control={control}
          rules={{required: '请选择性别'}}
          errors={errors.gender}
          render={({field:{onChange,value}}) => {
            return (
              <Radio.Group name="mygenderadioGroup" value={value}  onChange={onChange}>
                <HStack space={6}>
                  <Radio value="male" my={1}>
                    男
                  </Radio>
                  <Radio value="female" my={1}>
                    女
                  </Radio>
                </HStack>
              </Radio.Group>
            )
          }}
        />

        <FormItem 
          label='是否是目击者'
          name='isWitness'
          control={control}
          errors={errors.isWitness}
          render={({field:{onChange,value}}) => {
            return (
              <Switch onToggle={onChange} isChecked={value} />
            )
          }}
        />

        <FormItem 
          required
          label='报案描述'
          name='content'
          control={control}
          rules={{required: '请详细填写报案内容'}}
          errors={errors.content}
          render={({field:{onChange,value}}) => {
            return (
              <TextArea size="lg" w={500} onChangeText={onChange} value={value} />
            )
          }}
        />

        <FormItem 
          required
          label='报案类别'
          name='type'
          control={control}
          rules={{required: '请选择报案类别'}}
          errors={errors.type}
          render={({field:{onChange,value}}) => {
            return (
              <Select onValueChange={onChange} selectValue={value} size="lg" >
                <Select.Item label='打架斗殴' value='djdo' />
                <Select.Item label='邻里纠纷' value='lljf' />
              </Select>
            )
          }}
        />

        <FormItem 
          label='反馈日期'
          name='date'
          control={control}
          errors={errors.newdate}
          render={({field:{onChange,value}}) => {
            return (
              <FormDatePicker value={value} onChange={onChange} />
            )
          }}
        />

        <FormItem 
          required
          label=''
          name='agree'
          control={control}
          rules={{required: '请阅读'}}
          errors={errors.agree}
          render={({field:{onChange,value}}) => {
            return (
              <Checkbox onChange={onChange} value={value}>
                已知晓xxxx
              </Checkbox>
              
            )
          }}
        />
      </ScrollView>
      <Button onPress={handleSubmit(onSubmit)}>
        下方提交按钮
      </Button>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
  },
  title: {
    margin: 4,
    padding: 4,
    borderBottom: 2,
  },
  titleText: {
    fontSize: 20,
  }
})
export default AddFkd;